<template>
  <div class="mod-demo-ueditor">
    <el-alert title="提示：" type="warning" :closable="false">
      <div slot-scope="description">
        <p class="el-alert__description">1. 此Demo只提供UEditor官方使用文档，入门部署和体验功能。具体使用请参考：http://fex.baidu.com/ueditor/</p>
        <p class="el-alert__description">2. 浏览器控制台报错"请求后台配置项http错误，上传功能将不能正常使用！"，此错需要后台提供上传接口方法（赋值给serverUrl属性）</p>
      </div>
    </el-alert>

    <div :id="ueId" class="ueditor-box" style="width: 100%; height: 260px;"></div>

    <!-- 获取内容 -->
    <p><el-button @click="getContent()">获得内容</el-button></p>
    <el-dialog title="内容" :visible.sync="dialogVisible" :append-to-body="true">
      {{ ueContent }}
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const ueId = ref('ueditor');

onMounted(() => {
  const script = document.createElement('script');
  script.id = ueId.value;
  script.className = 'ueditor-box';
  script.type = 'text/plain';
  script.innerHTML = 'hello world!';
  document.getElementById(ueId.value).appendChild(script);
});

const ueContent = ref('');
const dialogVisible = ref(false);

const getContent = () => {
  dialogVisible.value = true;
  const ue = UE.getEditor(ueId.value);
  if (ue) {
    ue.ready(() => {
      ueContent.value = ue.getContent();
    });
  }
};
</script>

<style lang="scss">
.mod-demo-ueditor {
  position: relative;
  z-index: 510;

  >.el-alert {
    margin-bottom: 10px;
  }
}
</style>
